<template>
  <a-layout-header style="background: #fff; padding: 0">
    <a-button type="primary" @click="logout" class="logout">退出登录</a-button>
  </a-layout-header>
</template>

<script>
import { ExclamationCircleOutlined } from "@ant-design/icons-vue";
import { createVNode } from "vue";
import { Modal } from "ant-design-vue";
import { deleteUser, getUsername } from "../../utils";
import { useRouter } from "vue-router";

// 退出登录的hooks
function useLogout() {
  const router = useRouter();

  const username = getUsername();

  function logout() {
    Modal.confirm({
      title: `确认退出吗？ ${username}`,
      icon: createVNode(ExclamationCircleOutlined),
      okText: "Yes",
      okType: "danger",
      cancelText: "No",

      onOk() {
        deleteUser();
        router.replace("/login");
      },
    });
  }

  return {
    logout,
  };
}

export default {
  name: "Header",
  setup() {
    return {
      ...useLogout(),
    };
  },
};
</script>

<style>
.logout {
  position: absolute;
  top: 2%;
  right: 2%;
}
</style>